<template>
  <view class="page">
    <view>
      <picker mode="date" :value="dateYMstr" @change="change">
        <view class="date">{{dateYMstr}}</view>
      </picker>
    </view>
    <view class="scroll-y" scroll-y="true">
      <!-- 提醒 -->
      <view class="remind">
        <view class="remind-title">
          <view class="remind-title-text">提醒</view>
          <view @tap="add(3)">
            <uni-icons type="plus-filled" size="30" color="#ED7467"></uni-icons>
          </view>
        </view>
        <view v-for="(item,index) in list" class="remind-item" :key="index">
          <view>
            {{item.warnEventContent}}
          </view>
          <view class="remind-item-icons" @tap="delList(item,index)">
            <uni-icons style="opacity:0.4;" type="minus-filled" size="24" color="#000"></uni-icons>
          </view>
        </view>
      </view>
      <!-- 日程 -->
      <view class="remind" style="margin-top: 20px">
        <view class="remind-title">
          <view class="remind-title-text">日程</view>
          <view @tap="add(1)">
            <uni-icons type="plus-filled" size="30" color="#ED7467"></uni-icons>
          </view>
        </view>
      </view>
      <view class="list">
        <view v-for="(item,index) in remindList" :class="{'card':true,'sucess':item.warnEventStauts*1}" :key="index" @tap="checkActive(index)" @longpress="check(item)">
          <view v-if="item.warnEventStauts*1" class="sucess-status">完成</view>
          <view :class="{'card-left':true,'active':index==active}">
            <view class="card-left-text1">30</view>
            <view class="card-left-text2">周三</view>
          </view>
          <view class="card-right">
            <view class="card-right-title">{{item.warnEventContent}}</view>
            <view class="card-right-info" v-show="index==active">
              {{item.remark}}
            </view>
            <view class="card-right-time">{{item.warnEventTime}}</view>
          </view>
          <view class="sucess-gou" v-if="!(item.warnEventStauts*1)&&index==active" @tap="delRemindList(item,index)">
            <uni-icons type="checkmarkempty" size="20" color="#fff"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>
<script>
import { mapGetters } from 'vuex';
let id = null
let name = ''
export default {
  data() {
    return {
      x: 500,
      y: 1000,
      list: [
      ],
      active: null,
      remindList: [
      ],
      dateYMstr: ''
    }
  },
  computed: {
    ...mapGetters('user', {
      userInfo: 'getuserinfo'
    })
  },
  onLoad(options) {
    let _this = this
    id = options.id
    name = options.name
    _this.dateYMstr = new Date().Format('yyyy-MM-dd');
    _this.getList()
  },
  onShow() {
    this.getRemindList()
  },
  methods: {
    /**长按事件*/
    check(row) {
      const _this = this
      if (row.warnEventStauts * 1) {
        return
      }
      uni.showActionSheet({
        itemList: ['编辑', '删除'],
        success: function (res) {
          if (res.tapIndex === 1) {
            uni.showModal({
              title: '警告',
              content: '本次操作将要该日程',
              success: function (res) {
                if (res.confirm) {
                  _this.$post('/sale/wx/warn_task/delete_data', { id: row.id }, true).then(res => {
                    if (res.code * 1 === 200) {
                      _this.getRemindList()
                      uni.showToast({
                        icon: "none",
                        title: "删除成功",
                        position: "bottom"
                      })
                    }
                  })
                } else if (res.cancel) {
                }
              }
            });
          }
          if (res.tapIndex === 0) {
            uni.setStorage({
              key: 'schedule_key',
              data: row,
              success: function () {
                uni.navigateTo({
                  url: `/pages/schedule/add?type=1`
                });
              }
            });
          }

        },
        fail: function (res) {

        }
      });
    },
    /**更改状态*/
    delList(row, index) {
      const _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将关闭本条提醒',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/warn_task/update_data', {
              id: row.id,
              remark: row.remark,
              warnEventStauts: 1,
              warnTaskType: row.warnTaskType
            }, true).then(res => {
              if (res.code * 1 === 200) {
                uni.showToast({
                  icon: "none",
                  title: "本次提醒关闭",
                  position: "bottom"
                })
                _this.list.splice(index, 1)
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    delRemindList(row, index) {
      const _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将完成本次日程',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/warn_task/update_data', {
              id: row.id,
              remark: row.remark,
              warnEventStauts: 1,
              warnTaskType: row.warnTaskType
            }, true).then(res => {
              if (res.code * 1 === 200) {
                uni.showToast({
                  icon: "none",
                  title: "本次日程已完成",
                  position: "bottom"
                })
                _this.remindList[index].warnEventStauts = 1
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    /**获取提醒和日程*/
    getList() {
      const _this = this;
      _this.$post('/sale/wx/warn_task/get_datas', { warnTaskType: 2, warnEventStauts: 0, warnUserId: _this.userInfo.id, warnEventCustomerId: id }, false).then(res => {
        if (res.code * 1 === 200) {
          _this.list = res.data.row
        }
      })
    },
    getRemindList() {
      const _this = this;
      _this.$post('/sale/wx/warn_task/get_datas', { warnTaskType: 1, warnTime: _this.dateYMstr, warnEventCustomerId: id }, false).then(res => {
        if (res.code * 1 === 200) {
          _this.remindList = res.data.row
        }
      })
    },
    /**切换年月日*/
    change(event) {
      let _this = this
      _this.dateYMstr = event.detail.value
      _this.getRemindList()
    },
    /**日程选择*/
    checkActive(index) {
      let _this = this
      if (index === _this.active) {
        _this.active = null
        return
      }
      _this.active = index
    },
    add(type) {
      uni.navigateTo({
        url: `/pages/schedule/add?type=${type}&id=${id}&name=${name}`
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.page {
  background: #f2f2f2;
  min-height: 100vh;
}
.date {
  height: 40px;
  font-size: 20px;
  padding: 10px;
}
.more {
  height: 50px;
}
.list {
  padding: 0px 10px 15px 10px;
}

.card {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  position: relative;
  height: auto;
  .active {
    color: #e74837;
  }
  &-left {
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;
    &-text1 {
      font-size: 20px;
      font-weight: bold;
    }
    &-text2 {
      font-size: 14px;
    }
  }
  &-right {
    flex: 1;
    width: calc(100% - 70px);
    padding: 20px 10px 10px 10px;
    &-title {
      color: #000;
      font-size: 18px;
      font-weight: bold;
      width: 80%;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    &-time {
      // position: absolute;
      // right: 10px;
      // bottom: 20px;
      padding-top: 10px;
      font-size: 12px;
      font-weight: bold;
      color: #96968e;
    }
    &-info {
      font-size: 14px;
      line-height: 22px;
      padding: 5px 0 0px 0;
      word-break: break-all;
    }
  }
}
.sucess {
  background: rgba($color: #4cd964, $alpha: 0.2);
  overflow: hidden;
  &-status {
    position: absolute;
    right: -20px;
    top: -2px;
    font-size: 10px;
    color: #fff;
    background: #4cd964;
    padding: 5px 20px;
    transform: rotate(45deg);
  }
  &-gou {
    width: 26px;
    height: 26px;
    background: #4cd964;
    border-radius: 50%;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
.remind {
  margin: 10px;
  background: #fff;
  border-radius: 4px;

  &-title {
    padding: 15px 10px;
    display: flex;
    border-bottom: 1px solid #f2f2f2;
    justify-content: space-between;
    justify-items: center;
    &-text {
      font-size: 20px;
      font-weight: bold;
      word-break: break-all;
    }
  }
  &-item {
    padding: 15px 10px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    &-icons {
      padding-left: 10px;
    }
  }
  &-item + &-item {
    border-top: 1px solid #f2f2f2;
  }
}
</style>